import React, {Component} from 'react';
import {
    Text,
    View,
    StyleSheet,
    Image,
    TouchableOpacity
} from 'react-native';
import {scaleSize} from '../../utils/screen';
import FontText from '../components/FontText';
import { i18n } from '../../i18n';
export default class Tip extends Component {
    render() {
        return (
            <View style = {styles.container}>
                <View style = {styles.harder}>
                    <FontText font = {'book'} style = {styles.title}>{i18n.t("store.tip.title")}</FontText>
                </View>
                <View style = {styles.tipsBox}>
                    <View style = {styles.tipxBtns}>
                        <TouchableOpacity
                            style = {styles.tipBtn}
                            >
                            <FontText style = {styles.tipTitle} font = {'book'}>10%</FontText>
                            <FontText font = {'light'} style = {styles.tipMoney}>{i18n.t("moneytype")}10</FontText>
                        </TouchableOpacity>
                        <TouchableOpacity
                            style = {styles.tipBtn}
                            >
                            <FontText style = {styles.tipTitle} font = {'book'}>15%</FontText>
                            <FontText font = {'light'} style = {styles.tipMoney}>{i18n.t("moneytype")}15</FontText>
                        </TouchableOpacity>
                        <TouchableOpacity
                            style = {styles.tipBtn}
                            >
                            <FontText font = {'light'} style = {[styles.tipTitle,{fontSize: scaleSize(60),}]} font = {'book'}>{i18n.t("store.tip.custom")}</FontText>
                        </TouchableOpacity>
                    </View>
                    <TouchableOpacity style = {styles.notip}>
                        <FontText font = {'light'} style = {styles.notipText} font = {'book'}>{i18n.t("store.tip.notip")}</FontText>
                    </TouchableOpacity>
                </View>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container:{
        flex:1,
        alignItems:"center",
        backgroundColor: "#fff",
    },
    harder:{
        height:scaleSize(420),
        justifyContent: 'center',
        alignItems:"center"
    },
    title:{
        color:"#505050",
        fontSize:scaleSize(60)
    },
    tipsBox:{
        justifyContent:"center",
        width:scaleSize(1000)
    },
    tipxBtns:{
        flexDirection:"row",
        justifyContent:"space-between"
    },
    tipBtn:{
        backgroundColor: "#f8f8f8",
        width:scaleSize(320),
        height:scaleSize(320),
        justifyContent:"center",
        alignItems:"center"
    },
    tipTitle:{
        color:"#cfa972",
        fontSize:scaleSize(81)
    },
    tipMoney:{
        color:"#505050",
        fontSize:scaleSize(36)
    },
    notip:{
        backgroundColor: "#f8f8f8",
        justifyContent:"center",
        alignItems:"center",
        height:scaleSize(150),
        marginTop:scaleSize(20)
    },
    notipText:{
        color:"#505050",
        fontSize:scaleSize(36)
    }
})